<template>
  <div class="box">
    <div  @touchstart="start" @touchend="end">
      <CompactDisc v-show="flag" :deg="deg" :deg1="deg1"></CompactDisc>
      <Lyric v-show="!flag" :lyricList="lyricList" :scrollTop="scrollTop" :lyricIndex="lyricIndex" @clickLyric="clickLyric"></Lyric>
    </div>

    <div class="control">
      <div>
        <img src="/img/list-3.png" alt="">
        <img src="/img/list-4.png" alt="">
        <img src="/img/list-2.png" alt="">
      </div>
      <div><span>{{~~value*1000 | filter('mm:ss')}}</span>
        <van-slider v-model="value" @change="onChange" bar-height="10px" :max="max" input>
        <template #button>
          <div class="custom-button"></div>
        </template>
        </van-slider>
        <span>{{~~max*1000 | filter('mm:ss')}}</span></div>
      <div>
        <img src="/img/循环.png" alt="" id="loop">
        <img src="/img/pre_l.png" alt="" id="previous">
        <img :src="play" alt="" id="play" ref="onOff" @click="playAndPause">
        <img src="/img/pre_r.png" alt="" id="next">
        <img src="/img/列表.png" alt="" id="list">
        <ul id="songListBox">
        </ul>
      </div>
    </div>
    <audio :src="audioUrl"  ref="audio" @timeupdate="timeupdate"></audio>
  </div>
</template>

<script>

import { Toast } from 'vant';
import {getLyric, getMusic} from "@/http/api";
import CompactDisc from "@/components/CompactDisc";
import Lyric from "@/components/Lyric";
export default {
  name: "PlayBottom",
  data(){
    return  {
      flag:true,
      value: 0,
      audioUrl:'',
      lyriObj:{},
      play:'/img/play.png',
      pause:'/img/pause.png',
      lyricList:[],
      num:0,
      max:300,
      //光盘旋转计时器
      songImgTime:'',
      deg:0,
      deg1:-25,
      //指针旋转计时器
      playTime:'',
      pauseTime:'',
      scrollTop:0,
      lyricIndex:0
    }

  },
  methods : {
    timeupdate() {
      this.value =  this.$refs.audio.currentTime
      if (this.value > this.max-0.3) {
        this.value = 0
        clearInterval(this.songImgTime)
        this.$refs.onOff.src = this.play
        this.deg1 = -25
        this.num = 0
      }
    },
    clickLyric(data) {
      let i = 0
      // 循环歌词对象
      for (let key in this.lyriObj) {
        if ( i == data.index) {
          this.$refs.audio.currentTime = Number(key.substring(0,key.length-2))
        }
        i++;
      }

    },
    start() {
      var that = this;
      this.longClick = 0;
      this.timeOutEvent = setTimeout(function() {
        that.longClick = 1;
        // console.log("这是长按")
        that.flag = !that.flag
      }, 500);
    },
    move(e) {
      clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
      e.preventDefault();
      console.log("这是滑动")
    },
    end() {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0 && this.longClick == 0) {
        //点击
        //此处为点击事件----在此处添加跳转详情页
        // console.log("这是点击");
      }
      return false;
    },
    onChange(value) {
      Toast('当前播放至第：' + value + '秒');
      this.$refs.audio.currentTime = this.value
    },
    /* 处理歌词的函数 */
    cutLyric(lyric) {
    // 1.切割\n 变成数组
    var arr = lyric.split("\n")
    // console.log(arr);
    let obj = {}
    arr.forEach((item) => {
      if (item != '') {
        /* 以]为分界线获取歌词 */
        var itemIndex = item.indexOf(']')
        /* 处理歌词对应的时间 */
        var itemIndex1 = item.indexOf('.')
        let key = item.substring(1, itemIndex)
        /* 以:为界限划分分钟和秒钟 */
        var itemIndex2 = key.indexOf(':')
        var keyMinute = key.substring(0, itemIndex2)
        var keySecond = key.substring(itemIndex2+1,itemIndex1)
        var keyMSecond  = key.substring(itemIndex1,itemIndex1+2)
        key = Number(keyMinute) * 60 * 100 + Number(keySecond) * 100 + Number(keyMSecond)
        /* 歌词作为对象的属性值 */
        let value = item.substring(itemIndex + 1)
        obj[key] = value
      }
    })
    return obj
  },
    playAndPause() {
      if ( this.num == 0) {
        this.$refs.onOff.src = this.pause
        this.$refs.audio.play()
        /* 轮盘旋转 */
        this.songImgTime = setInterval( () =>{
          this.deg += 1
        }, 40)
        /* 设置小棍的旋转 */
        this.playTime = setInterval(()=> {
          this.deg1++
          if (this.deg1 == 6) {
            clearInterval(this.playTime)
          }
        }, 20)
        this.num = 1
      } else  {
        this.$refs.onOff.src = this.play
        this.num = 0
        this.pauseTime = setInterval(()=> {
          this.deg1--
          if (this.deg1 == -25) {
            clearInterval(this.pauseTime)
          }
        }, 20)
        clearInterval(this.songImgTime)
        this.$refs.audio.pause()
      }

    },
  },
  components:{
    CompactDisc,
    Lyric
  },
  created() {

    // console.log(this.$route.query.id)
    // 获取音乐
    getMusic(this.$route.query.id).then(res=>{
      // console.log(res)
      this.audioUrl = res.data.data[0].url
      this.max = Number((String(res.data.data[0].time)).substr(0,3))
    })
    //获取歌词
    getLyric(this.$route.query.id).then(res=>{
      // console.log(res)
      // console.log(this.cutLyric(res.lrc.lyric))
      this.lyriObj = this.cutLyric(res.data.lrc.lyric);
      for ( let x in this.lyriObj) {
        this.lyricList.push(this.lyriObj[x])
      }
      // console.log(this.lyricList)
    })
  },
  mounted() {

  },
  watch : {
    value (){
      this.value = this.$refs.audio.currentTime
      this.scrollTop = 70 * 5;
      // console.log(this.lyriObj)
      let i = 0
      // 循环歌词对象
      for (let key in this.lyriObj) {
        // key表示歌词对象中的时间，如果key等于歌曲进度value，改变当前歌词进度		lyricIndex
        if (Number(key.substring(0,key.length-2)) <= this.value) {
          this.lyricIndex = i;
          this.scrollTop = 70 * i;
        }
        i++;
      }
    },
    lyricIndex (lyricIndex) {
      this.scrollTop = 70 * lyricIndex;
    }
  },
}
</script>

<style scoped lang="less">
  .box {
    width: 100%;
    height: calc(100vh - 46px);
    background-color: rgb(129, 44, 153);
  }
  .custom-button {
    width: 20px;
    height: 20px;
    border-radius: 16px;
    background-image: url(../../public/img/IMG_202209144074_jpg.jpg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    box-sizing: border-box;
    border: 1px solid rgb(245,95,95);
  }
  /deep/.van-slider__bar {
    background-color: hotpink;
  }
  .control {
    width: 100%;
    position: absolute;
    bottom: 25px;
    >div:nth-of-type(1) {
      display: flex;
      justify-content: center;
      >img {
        width: 30px;
      }
      >img:nth-of-type(2) {
        margin: 0 50px;
      }
    }
    >div:nth-of-type(2) {
      margin: 15px 0 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      >.van-slider {
        width: 70%;
      }
      >span {
        color: white;
      }
    }
    >div:nth-of-type(3) {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      >img:nth-of-type(1) {
        border-radius: 10px;
      }
      >img:nth-of-type(1),
      >img:nth-of-type(5) {
        width: 30px;
        height: 30px;
      }
      >img:nth-of-type(2),
      >img:nth-of-type(4) {
        width: 35px;
        height: 35px;
      }
      >img:nth-of-type(2) {
        margin-left: 30px;
      }
      >img:nth-of-type(4) {
        margin-right: 30px;
      }
      >img:nth-of-type(3) {
        margin: 0 35px;
        width: 65px;
        height: 65px;
      }
      >ul {
        /* 歌曲列表 */
        width: 30%;
        height: 200px;
        position: absolute;
        top: -200px;
        right: 2%;
        display: none;
        list-style: none;
        text-align: center;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        // padding-top: 80px;
        >li {
          padding: 6px 5px;
          color: wheat;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        >.liActive {
          color: gold;
          font-weight: 700;
        }
      }
    }
  }
</style>